<template>
  <el-card>
    <!-- 面包屑 -->
    <my-bread leavl1="权限管理" leavl2="角色列表"></my-bread>
    <!-- 添加按钮 -->
    <el-row class="addrolebtn">
      <el-col>
        <el-button type="info" plain>信息按钮</el-button>
      </el-col>
    </el-row>

    <!-- 表格 -->
    <el-table :data="rolelist" style="width: 100%">
      <el-table-column type="expand" width="150">
        <template slot-scope="scope">
          <el-row v-for="(item1, i) in scope.row.children" :key="i">
            <el-col :span="4">
              <el-tag
                @close="deleteRight(scope.row, item1.id)"
                closable
                type="warring"
                >{{ item1.authName }}</el-tag
              >

              <i class="el-icon-arrow-right"></i>
            </el-col>
            <el-col :span="20">
              <el-row v-for="(item2, i) in item1.children" :key="i">
                <el-col :span="4">
                  <el-tag
                    @close="deleteRight(scope.row, item2.id)"
                    closable
                    type="success"
                    >{{ item2.authName }}</el-tag
                  >
                  <i class="el-icon-arrow-right"></i>
                </el-col>
                <el-col :span="20">
                  <el-tag
                    closable
                    type="danger"
                    v-for="(item3, i) in item2.children"
                    :key="i"
                    @close="deleteRight(scope.row, item3.id)"
                    >{{ item3.authName }}</el-tag
                  ></el-col
                >
              </el-row>
            </el-col>
          </el-row>
          <span v-if="scope.row.children.length == 0">未分配权限</span>
        </template>
      </el-table-column>
      <el-table-column prop="roleName" label="角色名称" width="200">
      </el-table-column>
      <el-table-column prop="roleDesc" label="角色描述" width="200">
      </el-table-column>

      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            plain
            type="primary"
            icon="el-icon-edit"
            circle
            @click="showEditUserDia(scope.row)"
          ></el-button>
          <el-button
            size="mini"
            plain
            type="success"
            icon="el-icon-check"
            circle
            @click="showSetRightDia(scope.row)"
          ></el-button>
          <el-button
            @click="showDeleteMsgBox(scope.row.id)"
            size="mini"
            plain
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- :default-expanded-keys="[2, 3]"
          :default-checked-keys="[5]" -->
    <!-- 修改权限对话框 -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisibleRight">
      <!-- <el-form :model="form"> -->
      <el-tree
        ref="tree"
        :data="treelist"
        show-checkbox
        node-key="id"
        :default-expanded-keys="arrexpand"
        :default-checked-keys="arrcheck"
        :props="defaultProps"
      >
      </el-tree>
      <!-- </el-form> -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleRight = false">取 消</el-button>
        <el-button type="primary" @click="setRoleright()">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      rolelist: [],
      dialogFormVisibleRight: false,
      //树形数据
      treelist: [],
      defaultProps: {
        label: "authName",
        children: "children",
      },
      arrexpand: [],
      arrcheck: [],
      currRoleId: -1,
    };
  },
  created() {
    this.getRolelist();
  },
  methods: {
    //修改权限--发送请求
    async setRoleright() {
      //全选
      let arr1 = this.$refs.tree.getCheckedKeys();
      //半选
      let arr2 = this.$refs.tree.getHalfCheckedKeys();
      //合并数组
      let arr = [...arr1, ...arr2];
      //发送请求
      const res = await this.$http.post(`roles/${this.currRoleId}/rights`, {
        rids: arr.join(","),
      });
      //刷新数组
      this.getRolelist();
      //关闭弹窗
      this.dialogFormVisibleRight = false;
    },
    //显示权限对话框
    async showSetRightDia(role) {
      const res = await this.$http.get(`rights/tree`);
      this.treelist = res.data.data;
      this.currRoleId = res.id;
      var arrtemp1 = [];
      this.treelist.forEach((item1) => {
        arrtemp1.push(item1.id);
        item1.children.forEach((item2) => {
          arrtemp1.push(item2.id);
          item2.children.forEach((item3) => {
            arrtemp1.push(item3.id);
          });
        });
      });

      var arrtemp2 = [];
      role.children.forEach((item1) => {
        arrtemp2.push(item1.id);
        item1.children.forEach((item2) => {
          arrtemp2.push(item2.id);
          item2.children.forEach((item3) => {
            arrtemp2.push(item3.id);
          });
        });
      });
      this.arrcheck = arrtemp2;
      this.arrexpand = arrtemp1;
      this.dialogFormVisibleRight = true;
    },
    // 关闭权限
    async deleteRight(role, rightId) {
      const res = await this.$http.delete(`roles/${role.id}/rights/${rightId}`);
      role.children = res.data.data;
    },
    async getRolelist() {
      const res = await this.$http.get(`roles`);
      //console.log(res);
      this.rolelist = res.data.data;
    },
  },
};
</script>

<style>
.addrolebtn {
  margin-top: 20px;
}
</style>